import * as Cesium from '@cesium/Source/Cesium.js';
import * as dat from 'dat.gui';

var demo = Cesium.defaultValue(demo, false);

const fileOptions = {
  dataDirectory: 'http://zzgis.com/cdn/dat/g3d/data/wind/',
  dataFile: "wind.nc",
  glslDirectory: 'http://zzgis.com/cdn/dat/g3d/data/wind/glsl/',
}

const defaultParticleSystemOptions = {
  maxParticles: 100 * 100,
  particleHeight: 100.0,
  fadeOpacity: 0.996,
  dropRate: 0.003,
  dropRateBump: 0.01,
  speedFactor: 0.1,
  lineWidth: 5
}

const globeLayers = [{
    name: "NaturalEarthII",
    type: "NaturalEarthII"
  },
  {
    name: "WMS:Rainfall",
    type: "WMS",
    layer: "Precipitable_water_entire_atmosphere_single_layer",
    ColorScaleRange: '0.1,66.8'
  },
  {
    name: "WMS:Air Pressure",
    type: "WMS",
    layer: "Pressure_surface",
    ColorScaleRange: '51640,103500'
  },
  {
    name: "WMS:Temperature",
    type: "WMS",
    layer: "Temperature_surface",
    ColorScaleRange: '204.1,317.5'
  },
  {
    name: "WMS:Wind Speed",
    type: "WMS",
    layer: "Wind_speed_gust_surface",
    ColorScaleRange: '0.1095,35.31'
  },
  {
    name: "WorldTerrain",
    type: "WorldTerrain"
  }
]

const defaultLayerOptions = {
  "globeLayer": globeLayers[0],
  "WMS_URL": "https://www.ncei.noaa.gov/thredds/wms/model-gfs-g4-anl-files-old/201809/20180916/gfsanl_4_20180916_0000_000.grb2",
}

class Panel {
  constructor() {
    this.maxParticles = defaultParticleSystemOptions.maxParticles;
    this.particleHeight = defaultParticleSystemOptions.particleHeight;
    this.fadeOpacity = defaultParticleSystemOptions.fadeOpacity;
    this.dropRate = defaultParticleSystemOptions.dropRate;
    this.dropRateBump = defaultParticleSystemOptions.dropRateBump;
    this.speedFactor = defaultParticleSystemOptions.speedFactor;
    this.lineWidth = defaultParticleSystemOptions.lineWidth;

    this.globeLayer = defaultLayerOptions.globeLayer;
    this.WMS_URL = defaultLayerOptions.WMS_URL;

    var layerNames = [];
    globeLayers.forEach(function(layer) {
      layerNames.push(layer.name);
    });
    this.layerToShow = layerNames[0];

    var onParticleSystemOptionsChange = function() {
      var event = new CustomEvent('particleSystemOptionsChanged');
      window.dispatchEvent(event);
    }

    const that = this;
    var onLayerOptionsChange = function() {
      for (var i = 0; i < globeLayers.length; i++) {
        if (that.layerToShow == globeLayers[i].name) {
          that.globeLayer = globeLayers[i];
          break;
        }
      }
      var event = new CustomEvent('layerOptionsChanged');
      window.dispatchEvent(event);
    }

    window.onload = function() {
      var gui = new dat.GUI({
        autoPlace: false
      });
      gui.add(that, 'maxParticles', 1, 200 * 200, 1).onFinishChange(onParticleSystemOptionsChange);
      gui.add(that, 'particleHeight', 1, 10000, 1).onFinishChange(onParticleSystemOptionsChange);
      gui.add(that, 'fadeOpacity', 0.90, 0.999, 0.001).onFinishChange(onParticleSystemOptionsChange);
      gui.add(that, 'dropRate', 0.0, 0.1).onFinishChange(onParticleSystemOptionsChange);
      gui.add(that, 'dropRateBump', 0, 0.2).onFinishChange(onParticleSystemOptionsChange);
      gui.add(that, 'speedFactor', 0.01, 0.5).onFinishChange(onParticleSystemOptionsChange);
      gui.add(that, 'lineWidth', 0.01, 16.0).onFinishChange(onParticleSystemOptionsChange);

      gui.add(that, 'layerToShow', layerNames).onFinishChange(onLayerOptionsChange);

      var panelContainer = document.getElementsByClassName('cesium-widget').item(0);
      gui.domElement.classList.add('myPanel');
      panelContainer.appendChild(gui.domElement);
    };
  }

  getUserInput() {
    // make sure maxParticles is exactly the square of particlesTextureSize
    var particlesTextureSize = Math.ceil(Math.sqrt(this.maxParticles));
    this.maxParticles = particlesTextureSize * particlesTextureSize;

    return {
      particlesTextureSize: particlesTextureSize,
      maxParticles: this.maxParticles,
      particleHeight: this.particleHeight,
      fadeOpacity: this.fadeOpacity,
      dropRate: this.dropRate,
      dropRateBump: this.dropRateBump,
      speedFactor: this.speedFactor,
      lineWidth: this.lineWidth,
      globeLayer: this.globeLayer,
      WMS_URL: this.WMS_URL
    }
  }
}

export {
  Panel,
  fileOptions,
  defaultParticleSystemOptions,
  globeLayers,
  defaultLayerOptions
};
